a {
  color: var(--van-blue);
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

.fs-1 {
  font-size: 12px !important;
}

.fs-2 {
  font-size: 13px !important;
}

.fs-3 {
  font-size: 14px !important;
}

.fs-4 {
  font-size: 16px !important;
}

.fs-5 {
  font-size: 18px !important;
}

.fs-6 {
  font-size: 20px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.ml-6 {
  margin-left: 10% !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.ma-0 {
  margin: 0px !important;
}

.ma-1 {
  margin: 4px !important;
}

.ma-2 {
  margin: 8px !important;
}

.ma-3 {
  margin: 12px !important;
}

.ma-4 {
  margin: 16px !important;
}

.ma-5 {
  margin: 20px !important;
}

.pa-1 {
  padding: 4px !important;
}

.pa-2 {
  padding: 8px !important;
}

.pa-3 {
  padding: 12px !important;
}

.pa-4 {
  padding: 16px !important;
}

.pa-5 {
  padding: 20px !important;
}

.pa-6 {
  padding: 24px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.bc-1 {
  background-color: #9d0008 !important;
}

.bc-2 {
  background-color: #833135 !important;
}

.bc-3 {
  background-color: #026b4b !important;
}

.bc-4 {
  background-color: #f2f2f2 !important;
}

.bc-5 {
  background-color: #fff !important;
}

.bc-6 {
  background-color: #eecca8 !important;
}

.bc-7 {
  background-color: #f6f6f6 !important;
}

.bc-8 {
  background-color: #ccc !important;
}

.co-1 {
  color: #aaaaaa !important;
}

.co-2 {
  color: #95c8f3 !important;
}

.co-3 {
  color: #fff !important;
}

.co-4 {
  color: #c67f4c !important;
}

.co-5 {
  color: #333;
}

.co-6 {
  color: #9d0008;
}
.co-7 {
  color: #0089ff;
}

.position-relative {
  position: relative;
}

.position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.position-row-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.flexItem {
  flex: 1;
  overflow: hidden;
}

.letter-spacing-1 {
  letter-spacing: 0.05rem;
}

.fw-1 {
  font-weight: bold;
}

.opacity-8 {
  opacity: 0.8;
}

.text-truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.text-truncate-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  max-height: 40px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-start-align-items-flex-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-start_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bc-size {
  -webkit-background-size: cover !important;
  -o-background-size: cover !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  -moz-background-size: 100% 100% !important;
}

.border-bottom {
  border-bottom: 1px solid var(--van-gray-4);
}

.border-top {
  border-top: 1px solid var(--van-gray-4);
}

.line-through {
  text-decoration: line-through;
}
.rich-book {
  font-family: Arial Bold !important;
  max-width: 960px;
  padding-top: 35px;
  // max-width: 1686px;
  margin: 0 auto;
  h1 {
    font-family: Arial Bold !important;
    font-size: 24px !important;
    text-align: center;
  }
  h2 {
    font-family: Arial Bold !important;
    font-size: 24px !important;
    text-align: left;
  }
  h3 {
    font-family: Arial Bold !important;
    font-size: 18px !important;
    text-align: left;
  }
  h4 {
    font-family: Arial Bold !important;
    font-size: 18px !important;
    text-align: center;
  }
  p {
    font-size: 14px !important;
    font-family: Arial Regular !important;
    text-align: left;
  }

  li {
    // padding-left: 10px;
    font-size: 14px !important;
    font-family: Arial Regular !important;
    text-align: left;
  }
}

.rich-common {
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  p,
  a {
    max-width: 100%;
    word-wrap: break-word;
  }
  table {
    overflow-x: auto;
    max-width: 100%;
    display: block;
    border: none;
    &::-webkit-scrollbar {
      margin-right: 2px;
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      width: 8px;
      border-radius: 2em;
      background: #cbcbcb;
    }

    &::selection {
      background: #ddd;
      color: #000;
      text-shadow: none;
    }
  }
  iframe {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* .comm_p{
  padding: 0.32rem;
} */

@media screen and (min-width: 320px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 16px;
  }
}

.lxp_fixed {
  position: fixed;
  bottom: 0;
  width: 96%;
  background: #fff;
  padding: 1% 2%;
}
.van-number-keyboard {
  z-index: 9999 !important;
}

.hover-color {
  &:hover {
    color: #0089ff !important;
    font-weight: bold !important;
    cursor: pointer;
    div{
      color: #0089ff !important;
    }
  }
}
